<template>
	<view class="page">
		<back :title="'我的优惠券'" :isBack="true"></back>
		<scroll-view class="message_box" scroll-y v-if="couponList.length > 0">
			<view class="dange_coupon_box" :class="'dange_coupon_box_' + couponObj.flag">
				<view class="left_con_box" :class="'left_con_box_' + couponObj.flag">
					<text class="qzf_box" :class="'qzf_box_' + couponObj.flag">¥</text>{{ couponObj.credit * 1 }}
				</view>
				<view class="right_con_box">
					<view class="xyh_txt_box" :class="'xyh_txt_box_' + couponObj.flag">{{ couponObj.title }}</view>
					<view class="con_cz_box">
						<view class="left_txt_box" :class="'left_txt_box_' + couponObj.flag">现金无门槛使用</view>
						<view class="rt_yong_box1" v-if="couponObj.flag == '2'"  >已使用</view>
						<view class="rt_yong_box" v-else @click="goWith">去使用</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<empoy v-else :imageUrl="'https://build.lwjcg.com/uploads/kcocup.png'" :kongtext="'暂无优惠券'"></empoy>
	</view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
	components: {
		back, empoy
	},
	data() {
		return {
			couponList: [1],
			couponObj: {},
			sysh: '',//1直接返回使用   其他先点后使用
		}
	},
	onLoad(options) {
		this.sysh = options.sysh
	},
	onShow() {
		this.getcoupon()
	},
	methods: {
		getcoupon() {
			this.$Request.post(this.$api.index.couponList).then(res => {
				if (res.code == 200) {
					this.couponObj = res.data
				}
			})
		},
		goWith() {
			this.$store.state.couponObj = this.couponObj
			if (this.sysh == '1') {
				uni.navigateBack()
			} else {
				uni.navigateTo({
					url: '/pages/index/reservationDetai'
				})
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.page {
	width: 100vw;
	height: 100vh;
	background-color: rgba(246, 246, 246, 1);

	.message_box {
		width: 100%;
		height: calc(100vh - 230rpx);
		margin-top: 26rpx;

		.dange_coupon_box {
			width: 702rpx;
			height: 214rpx;
			// background: linear-gradient(90deg, rgba(255, 209, 209, 1) 0%, rgba(255, 232, 232, 1) 100%);
			background-image: url('https://build.lwjcg.com/uploads/coupon.png');
			background-size: 100% 100%;
			margin: auto;
			display: flex;
			justify-content: space-between;

			&.dange_coupon_box_2 {
				background-image: url('https://build.lwjcg.com/uploads/select_coupon.png');
			}

			.left_con_box {
				width: 258rpx;
				height: 216rpx;
				// background: rgba(255, 80, 54, 1);
				font-size: 96rpx;
				font-weight: 600;
				line-height: 216rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;

				&.left_con_box_2 {
					color: rgba(166, 166, 166, 1);
				}

				.qzf_box {
					font-size: 40rpx;
					font-weight: 600;
					line-height: 216rpx;
					color: rgba(255, 255, 255, 1);

					&.qzf_box_2 {
						color: rgba(166, 166, 166, 1);
					}
				}

			}

			.right_con_box {
				width: 444rpx;
				height: 216rpx;
				// background-color: pink;
				box-sizing: border-box;
				padding-top: 45rpx;
				padding-left: 22rpx;
				padding-right: 26rpx;

				.xyh_txt_box {
					height: 64rpx;
					font-size: 48rpx;
					font-weight: 600;
					line-height: 64rpx;
					color: rgba(255, 80, 54, 1);
					margin-bottom: 12rpx;

					&.xyh_txt_box_2 {
						color: rgba(166, 166, 166, 1);
					}
				}

				.con_cz_box {
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left_txt_box {
						height: 38rpx;
						opacity: 1;
						/** 文本1 */
						font-size: 28rpx;
						font-weight: 400;
						line-height: 38rpx;
						color: rgba(255, 87, 51, 1);

						&.left_txt_box_2 {
							color: rgba(166, 166, 166, 1);
						}
					}

					.rt_yong_box {
						width: 141.73rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						border-radius: 77rpx;
						background: rgba(255, 80, 54, 1);
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);

					}

					.rt_yong_box1 {
						width: 141.73rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						border-radius: 77rpx;
						background: rgba(128, 128, 128, 1);
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);

					}
				}
			}
		}
	}
}
</style>